/**
 * 支付管理 支付配置
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">诊所管理</el-breadcrumb-item>
      <el-breadcrumb-item>调休配置</el-breadcrumb-item>
    </el-breadcrumb>
    <p style="font-size: 20px;font-weight: bold;">7天后调休配置（蓝色为工作，白色为休息）</p>
    <div class="box">
      <ul class="container">
        <li v-for="workDay in workDayList" :style="workDay.state === 1 ? 'background: #276ad2;color: #fff':''" @click="rest(workDay.id, workDay.state)">
          <span>{{workDay.week | spliceWeek}}</span>
          <span>{{workDay.time | timeToString}}</span>
        </li>
      </ul>
    </div>
<!--    <el-calendar>-->
<!--      &lt;!&ndash; 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法&ndash;&gt;-->
<!--      <template-->
<!--        slot="dateCell"-->
<!--        slot-scope="{date, data}">-->
<!--        <p :class="data.isSelected ? 'is-selected' : ''">-->
<!--          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}-->
<!--        </p>-->
<!--      </template>-->
<!--    </el-calendar>-->
    <el-table :header-cell-style="{fontSize: '16px'}" :cell-style="{fontSize: '20px'}" size="medium" :data="timeSlotList" ref="multipleTable" @selection-change="handleSelection" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;margin-top: 20px">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column  label="ID" width="100">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="timeSlot" label="时间段">
      </el-table-column>
      <el-table-column prop="number" label="放号数量">
      </el-table-column>
      <el-table-column align="center" label="操作" width="230">
        <template slot-scope="scope">
          <el-button size="medium" @click="editorRow(scope.row)">编辑</el-button>
          <el-button size="medium" @click="delRow(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;text-align: center;border:solid 1px #E4E7ED;border-top: none;padding: 10px 0px 10px 0px">
      <el-button size="medium" type="success" @click="addRow">添加</el-button>
    </div>
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="100px" :model="editForm" ref="editForm">
        <el-form-item label="时间段" prop="name">
          <el-input size="medium" v-model="editForm.timeSlot" auto-complete="off" placeholder="请输入时间段"></el-input>
        </el-form-item>
        <el-form-item label="放号数量" prop="phone">
          <el-input size="medium" v-model="editForm.number" auto-complete="off" placeholder="请输入放号数量"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="closeDialog">取消</el-button>
        <el-button size="medium" type="primary" :loading="loading" class="title" @click="save">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="addFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="100px" :model="editForm" ref="editForm">
        <el-form-item label="时间段" prop="name">
          <el-input size="medium" v-model="editForm.timeSlot" auto-complete="off" placeholder="请输入时间段"></el-input>
        </el-form-item>
        <el-form-item label="放号数量" prop="phone">
          <el-input size="medium" v-model="editForm.number" auto-complete="off" placeholder="请输入放号数量"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="closeDialog">取消</el-button>
        <el-button size="medium" type="primary" :loading="loading" class="title" @click="add">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ConfigList, ConfigSave, ConfigDelete } from '../../api/payMG'
import Pagination from '../../components/Pagination'
import {addTimeSlot, checkAllWorkDay, delTimeSlot, getAllTimeSlot, restWorkDay, updateTimeSlot} from "../../api";
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      addFormVisible: false,
      workDayList: [],
      timeSlotList: [],
      title: '',
      editForm: {},
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getData()
    this.getTimeSlotData()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getData: function () {
      checkAllWorkDay()
      .then(res => {
        this.workDayList = res.result
        this.workDayList.sort(function (x, y) {
          return x.id - y.id
        })
      })
      .catch(err => {

      })
    },
    rest: function (workDayId, state) {
      let changeState
      if (state === 1) {
        changeState = 0
      } else if (state === 0) {
        changeState = 1
      }
      let params = new URLSearchParams()
      params.append('state', changeState)
      params.append('workDayId', workDayId)
      restWorkDay(params)
      .then(res => {
        if (res.result) {
          this.getData()
        }
      })
      .catch(err => {

      })
    },
    handleSelection: function () {
      this.checkMultipleTable = this.$refs.multipleTable.selection
    },
    getTimeSlotData: function () {
      getAllTimeSlot()
      .then(res => {
        this.timeSlotList = res.result
      })
      .catch(err => {

      })
    },
    editorRow: function (row) {
      this.editForm = row
      this.title = "编辑"
      this.editFormVisible = true
    },
    save: function () {
      let _this = this
      let params = new URLSearchParams()
      params.append('id', _this.editForm.id)
      params.append('timeSlot', _this.editForm.timeSlot)
      params.append('number', _this.editForm.number)
      updateTimeSlot(params)
      .then(res => {
        _this.editFormVisible = false
        _this.loading = false
        if (res.success) {
          this.getTimeSlotData()
          this.$message({
            type: 'success',
            message: '更新成功！'
          })
        } else {
          this.$message({
            type: 'info',
            message: '更新失败'
          })
        }
      })
      .catch(err => {
        _this.editFormVisible = false
        _this.loading = false
        _this.$message.error('更新失败，请稍后再试！')
      })
    },
    delRow: function (row) {
      let _this = this
      let params = new URLSearchParams()
      params.append('id', row.id)
      delTimeSlot(params)
      .then(res => {
        if (res.success) {
          this.getTimeSlotData()
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
        } else {
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        }
      })
      .catch(err => {
        _this.editFormVisible = false
        _this.loading = false
        _this.$message.error('删除失败，请稍后再试！')
      })
    },
    addRow: function () {
      this.addFormVisible = true
      this.editForm = {}
    },
    add: function () {
      let _this = this
      let params = new URLSearchParams()
      params.append('timeSlot', _this.editForm.timeSlot)
      params.append('number', _this.editForm.number)
      addTimeSlot(params)
        .then(res => {
          _this.addFormVisible = false
          _this.loading = false
          if (res.success) {
            this.getTimeSlotData()
            this.$message({
              type: 'success',
              message: '添加成功！'
            })
          } else {
            this.$message({
              type: 'info',
              message: '添加失败'
            })
          }
        })
        .catch(err => {
          _this.editFormVisible = false
          _this.loading = false
          _this.$message.error('添加失败，请稍后再试！')
        })
    },
    closeDialog: function () {
      this.editFormVisible = false
      this.addFormVisible = false
    }
  },
  filters: {
    spliceWeek: function (value) {
      return value.substr(2,2)
    },
    timeToString: function (value) {
      let result
      if (value === 0) {
        result = "上"
      } else if (value === 1) {
        result = "下"
      }
      return result
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
  color: #276ad2;
}
.box{
  margin-top: 20px;
  width: 440px;
  height: 110px;
  padding: 20px 25px 20px 25px;
  background-color: #f6f6f6;
  box-shadow: 0px 0px 8px 3px rgba(0,0,0,.1);
  border-radius: 5px;
}
.container {
  writing-mode: vertical-lr;
  /* 内容从上到下垂直排列，下一垂直行位于上一行右侧 */
  height: 120px;
  /* 必须控制容器高度，宽度自适应 */
  font-size: 0;
  /* 子元素为行内块元素，需要设置父元素font-size为0，否则子元素会有间隙 */
  margin: 0;
  padding: 0;
}

.container li {
  display: inline-block;
  /*必须设置为行内块，否则会水平排列*/
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #FFF;
  box-shadow: 0px 0px 10px 2px rgba(50, 50, 50, 0.1);
  text-align: center;
  line-height: 50px;
  writing-mode: horizontal-tb;
  /* 这里必须改成水平，否则文字显示方向不对*/
  margin: 0 15px 10px 0;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  transition: all .25s;
  /* 必须重设字体大小,否则font-size为0 */
}

.flex {
  display: flex;
  flex-direction: column;
  background-color: pink;
  margin: 50px 0 0;
  padding: 0;
  height: 180px; /* 必须设置高度, 否则就垂直一列排完了 */
  flex-wrap: wrap;
  width: 330px; /* (100+10)*3  需要设置容器宽度, 否则子元素与子元素水平防线的间距不对(对间距无要求可忽略) */
}

.flex li {
  width: 100px;
  height: 50px;
  background-color: #FFF;
  text-align: center;
  line-height: 50px;
  margin: 0  0 10px 0; /* margin-left,margin-right设置无效*/
  color: #000;
  font-size: 40px;
  list-style: none;
}
</style>


